<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 指定文档字符编码 -->
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 响应式设计必备，控制移动设备上的视口大小和缩放 -->
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 告诉IE浏览器使用最新的渲染引擎 -->
    
    <meta name="description" content="这是一个HTML元数据标签的示例页面，展示了各种meta标签的用法和作用">
    <!-- 页面内容描述，用于搜索引擎展示 -->
    
    <meta name="keywords" content="HTML, meta标签, 元数据, SEO, 前端开发">
    <!-- 页面关键词，帮助搜索引擎理解页面主题 -->
    
    <meta name="author" content="前端开发者">
    <!-- 页面作者信息 -->
    
    <meta name="robots" content="index, follow">
    <!-- 告诉搜索引擎可以索引本页面并跟踪链接 -->
    
    <meta name="revisit-after" content="7 days">
    <!-- 建议搜索引擎7天后重新访问本页面 -->
    
    <meta http-equiv="refresh" content="30">
    <!-- 每30秒自动刷新页面（实际应用中谨慎使用） -->
    
    <meta property="og:title" content="HTML元数据标签示例">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://example.com/meta-tags">
    <meta property="og:image" content="https://picsum.photos/400/300" alt="HTML元数据标签示例图片">
    <meta property="og:description" content="详细展示各种HTML meta标签的用法和作用">
    <!-- Open Graph协议标签，用于社交媒体分享时的展示效果 -->
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="HTML元数据标签示例">
    <meta name="twitter:description" content="详细展示各种HTML meta标签的用法和作用">
    <meta name="twitter:image" content="https://picsum.photos/400/300" alt="HTML元数据标签示例图片">
    <!-- Twitter卡片标签，优化在Twitter上的分享效果 -->
    
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    <!-- 内容安全策略，防止XSS攻击等安全问题 -->
    
    <meta name="theme-color" content="#4285f4">
    <!-- 定义浏览器工具栏的颜色（在支持的设备上） -->
    
    <link rel="canonical" href="https://example.com/meta-tags">
    <!-- 规范链接，告诉搜索引擎页面的首选URL，避免重复内容问题 -->
    
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!-- 页面图标 -->
    
    <title>HTML元数据标签应用示例</title>
    <!-- 页面标题，显示在浏览器标签页，也是搜索引擎结果的主要标题 -->
</head>
<body>
    <header>
        <h1>HTML元数据标签示例</h1>
        <p>本页面展示了各种HTML meta标签的用法和作用</p>
    </header>
    
    <main>
        <section>
            <h2>什么是元数据标签？</h2>
            <p>元数据标签(&lt;meta&gt;)提供了关于HTML文档的元数据，这些数据不会显示在页面上，但对于浏览器、搜索引擎和其他web服务非常重要。</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2023 前端学习示例</p>
    </footer>
</body>
</html>
